<template>
    <div ref='fixed' id="shaixuan" :class="{icon:res}">
        <div id="sx_d1">
            <ul>
                <li class="d1_li"><a href="#"></a><span>综合排序</span> <span class="iconfont">&#xe791;</span></li>
                <li class="d1_li"><a href="#"></a><span>好评优先</span></li>
                <li class="d1_li"><a href="#"></a><span>距离最近</span></li>
                <li class="d1_li"><a href="#"></a><span>筛选</span><span class="iconfont">&#xe6e2;</span></li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        'res':Boolean
    }
}
</script>
<style lang="stylus" scoped>
    
    #shaixuan
        height 10.666667vw
        // position relative
        // border 1px solid #f00
    
        #sx_d1
            // position: absolute;
            // top: 0;
            // bottom: 0;
            width: 100%;
            height: 10.533333vw;
            display: flex;
            line-height 10.533333vw
            z-index: 4;
            background-color: #fff;
        #sx_d1
            ul
                font-size 20px
                display flex 
                width 100%
                .d1_li
                    // display inline-block
                    flex 1
                    text-align center
                    color #666
                    position relative
                    font-size .373333rem
                    z-index 101
                .d1_li
                    a
                        text-align: center;
                        color: #666;
                        position: relative;
                        font-size: .373333rem;
    .icon
        position fixed
        top 15vw
        right 0
        left 0
        z-index 1000
        width 100%
        // background-color #0f0
        

</style>


